import './index.scss'
import { useDispatch } from 'react-redux'
import { setCards } from '../../../store/modules/takeaway'

const Foods = ({
  id,
  picture,
  name,
  unit,
  description,
  foodTagList,
  monthSaled,
  likeRatioDesc,
  price,
  tag,
  count
}) => {

  foodTagList = JSON.parse(foodTagList)
  const dispatch = useDispatch()
  return (
    <dd className="cate-goods">
      <div className="goods-img-wrap">
        <img src={picture} alt="" className="goods-img" />
      </div>
      <div className="goods-info">
        <div className="goods-desc">
          <div className="goods-title">{name}</div>
          <div className="goods-detail">
            <div className="goods-unit">{unit}</div>
            <div className="goods-detail-text">{description}</div>
          </div>
          <div className="goods-tag">{foodTagList.join(' ')}</div>
          <div className="goods-sales-volume">
            <span className="goods-num">月售{monthSaled}</span>
            <span className="goods-num">{likeRatioDesc}</span>
          </div>
        </div>
        <div className="goods-price-count">
          <div className="goods-price">
            <span className="goods-price-unit">¥</span>
            {price}
          </div>
          <div className="goods-count">
            <span className="plus" onClick={() => dispatch(setCards({
              id,
              picture,
              name,
              unit,
              description,
              foodTagList,
              monthSaled,
              likeRatioDesc,
              price,
              tag,
              count:1
            }))}>+</span>
          </div>
        </div>
      </div>
    </dd>
  )
}

export default Foods
